<template>
  <el-row :gutter="20">
        <el-col :span="4">
            <div class="nav">
                <div class="title">用户类型列表</div>
                <div class="tree">
                    <treeUser></treeUser>
                </div>
            </div>
        </el-col>
        <el-col :span="20">
            <div class="wrapper">
                <div class="myTitle">用户添加</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="所属分类" prop="category">
                        <span>{{ ruleForm.category }}</span>
                    </el-form-item>
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="上传图片" prop="image">
                        <UploadImg :backUrl="ruleForm.image"></UploadImg>
                    </el-form-item>
                    <el-form-item label="用户症状" prop="symptoms">
                        <WangEditor :content="this.ruleForm.symptoms"></WangEditor>
                    </el-form-item>
                    <el-form-item label="首页轮播推进" prop="isShow">
                        <el-switch v-model="ruleForm.isShow" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否推荐商品" prop="isShow">
                        <el-switch v-model="ruleForm.isShow" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否上架商品" prop="isShow">
                        <el-switch v-model="ruleForm.isShow" active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="closePage" v-if="seeInfo">返回</el-button>
                        <el-button v-if="!seeInfo" type="primary" @click="submitForm('ruleForm')">保存</el-button>
                        <el-button v-if="!seeInfo" @click="resetForm('ruleForm')">重置</el-button>
                        <el-button v-if="!seeInfo" @click="closePage">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import treeUser from './treeUser.vue'
import UploadImg from './upLoadImg.vue'
import WangEditor from './wangEditor.vue'
export default {
    components:{
        treeUser,UploadImg,WangEditor
    },
    data() {
        return {
            seeInfo:'',
            ruleForm: {
                category: '',
                title:'',
                price:'',
                num:'',
                image:'',
                descs:'',
                isShow: true,
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'change' }
                ],
                category: [
                    { required: true, message: '请选择用户的分类', trigger: 'change' }
                ],
            }
        };
    },
    created(){
        this.$bus.on('sendTreeData',(val)=>{
            this.ruleForm.category=val.label
        })
        this.$bus.on('sendHtml',(val)=>{
            let str=val.split("<p>")
            str=str[1]
            str=str.split("</p>")
            str=str[0]
            this.ruleForm.symptoms=str
        })
        if(this.$route.params.userInfo){
            this.seeInfo=this.$route.params.userInfo
            this.ruleForm.username=this.seeInfo.username
            this.ruleForm.phone=this.seeInfo.phone
            this.ruleForm.name=this.seeInfo.name
            this.ruleForm.image=this.seeInfo.image
            this.ruleForm.symptoms=this.seeInfo.symptoms
        }
    },
    methods:{
        closePage(){
            this.$router.push('/user/list')
        },
        submitForm(forName){
            this.$refs[forName].validate((valid)=>{
                if(valid){
                    alert('submit!');
                }
                else{
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        resetForm(forName){
            this.$refs[forName].resetFields()
        },
    }
}
</script>

<style lang="less" scoped>
.nav{
    height: 600px;
    background: #FFF;
    .title {
        background: skyblue;
        padding: 20px;
        color: #fff;
    }
    .tree{
        padding: 20px;
    }
}
.wrapper{
    background: #FFF;
    .myTitle {
        background: #eee;
        padding: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .demo-ruleForm{
        padding: 20px;
    }
}
</style>